<template>
  <div class="footer">
    <div class="content display-flex space-between">
      <div class="display-flex space-between flex-item">
        <div v-for="(list,index) in menuList">
          <ul>
            <li class="menu" @click="headerOn(index)"><a :href="list.url=='index'?'/':list.url">{{list.name}}</a></li>
            <li class="menu2" v-if="list.sub" v-for="item in list.sub">{{item.name}}</li>
          </ul>
        </div>
        <div>
          <ul>
            <li class="menu" @click="headerOn(6)"><a href="/news">新闻资讯</a></li>
          </ul>
        </div>
      </div>
      <div class="contactUs">
        <p>客服电话：</p>
        <p>{{phone}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'el-footer',
    componentName: 'ElFooter',
    //import引入的组件需要注入到对象中才能使用
    data() {
      //这里存放数据
      return {
        menuIndex: "0",

        menuList:[],
        phone: '',
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      getMenu() {
        if(!this.menuList){
          return
        }
        let that = this;
        this.$http
          .post(this.$api.default.menuList,)
          .then(res => {
            // console.log('数据', res)
            this.menuList = res.data;
          }).catch(error => {
        })
          .then(() => {
          });
      },
      //获取电话
      getData() {
        this.phone = localStorage.getItem('phone');
        if(this.phone){
          return
        }
        let that = this;
        this.$http
          .post(this.$api.default.aboutUs,)
          .then(res => {
            console.log('数据', res);
            that.phone = res.data[0].value
            localStorage.setItem('phone',that.phone);
          }).catch(error => {
        })
          .then(() => {
          });
      },
      //头部导航选中显示
      headerOn(index){
        // console.log(index);
        localStorage.setItem('menuIndex',index);
      },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getMenu();
      this.getData();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}, //生命周期 - 创建之前
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    //生命周期 - 更新之前
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
  };
</script>
<style scoped>
  .footer{
    height: 340px;
    background: #333333;
    margin: auto;
    width: 100%;
    min-width: 1200px;
    min-height: 340px;
  }
  .content{
    width: 1200px;
    margin: auto;
    color: #FFFFFF;
    padding-top: 80px;
    padding-bottom: 37px;
    /*min-width: 1200px;*/
  }
  a, a:hover, a:active, a:visited, a:link, a:focus {
    color: #fff;
  }
  ul{
    /*line-height: 60px;*/
  }
  .menu{
    font-size: 18px;
    margin-bottom: 24px;
  }
  .menu2{
    font-size: 12px;
    margin-bottom: 19px;
  }
  .contactUs{
    width: 330px;
    padding-left: 90px;
    padding-top: 60px;
  }
  .contactUs p:nth-of-type(1){
    font-size: 18px;

  }
  .contactUs p:nth-of-type(2){
    font-size: 30px;
  }
</style>
